<template>
  <itemMusicTop :playlist="state.playlist"></itemMusicTop>
  <itemMusicList :itemList="state.itemList" :subscribedCount="state.playlist.subscribedCount"></itemMusicList>
</template>
<script>
import {useRoute} from 'vue-router'
import {onMounted,reactive} from 'vue'
import { getMusicList,getItemList } from '@/request/api/item'
import itemMusicTop from '@/components/item/itemMusicTop.vue'
import itemMusicList from '@/components/item/itemMusicList.vue'
export default {
  setup(){
  const state = reactive({
    playlist:[],
    itemList:[]
  })
  onMounted(async()=>{
    const id = useRoute().query.id
    const {data:res}= await getMusicList(id)
    state.playlist = res.playlist
    sessionStorage.setItem('playlist',JSON.stringify(state))
    const {data:result} = await getItemList(id)
    state.itemList = result.songs
  })
  return {state}
},
components:{
  itemMusicTop,itemMusicList
}
}
</script>